
/**
 * 尊敬的用户，你好：页面 JS 面板是高阶用法，一般不建议普通用户使用，如需使用，请确定你具备研发背景，能够自我排查问题。
 * 我们可以用 JS 面板来开发一些定制度高功能，比如：调用API接口，自定义动作执行等等。
 */

// 当页面渲染完毕后马上调用下面的函数，这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
export function didMount() {
    ("「页面 JS」：当前页面地址 " + location.href);
    let textele = this.$$("text_a8cjvd");
    // 模拟接口返回数据
    const dates = [
        { date: '2025-10-09', label: '10月9日', weekday: '周四', state: 'my-booking' },
        { date: '2025-10-10', label: '10月10日', weekday: '周五', state: 'booked' },
        { date: '2025-10-11', label: '10月11日', weekday: '周六', state: 'available' },
        { date: '2025-10-12', label: '10月12日', weekday: '周日', state: 'available' },
        { date: '2025-10-13', label: '10月13日', weekday: '周一', state: 'available' },
        { date: '2025-10-14', label: '10月14日', weekday: '周二', state: 'available' },
        { date: '2025-10-15', label: '10月15日', weekday: '周三', state: 'booked' },
    ];

    const calendar = document.getElementById('calendar');

    // 各状态对应的基础样式
    const baseStyle = "width: 100%; height: 60px; box-sizing: border-box; border-radius: 4px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 14px; user-select: none;";

    const stateStyles = {
        "my-booking": baseStyle + " border: 1px solid rgba(255,106,42,0.2); background-color: #ffe8df; color: #363A44; cursor: not-allowed;",
        "booked": baseStyle + " border: 1px solid #E9ECF2; background-color: #f5f5f5; color: #363A44; cursor: not-allowed;",
        "available": baseStyle + " border: 1px solid #E9ECF2; background-color: #fff; color: #363A44; cursor: pointer;",
    };

    // 选中样式（覆盖 available）
    const selectedStyle = baseStyle + " border: 1px solid #428FFC; background: rgba(66,143,252,0.08); color: #428FFC; cursor: pointer;";

    // 渲染日历格
    dates.forEach(item => {
        const div = document.createElement('div');
        div.className = 'day ' + item.state;
        div.dataset.state = item.state;
        div.dataset.date = item.date;
        div.dataset.selected = "false"; // 初始化未选中
        div.style.cssText = stateStyles[item.state] || baseStyle;
        div.innerHTML = `${item.label}<br>${item.weekday}`;

        if(item.state === 'available') {
            div.addEventListener('click', () => {
                if(div.dataset.selected === "true") {
                    // 已选中，取消选中
                    div.dataset.selected = "false";
                    div.style.cssText = stateStyles['available'];
                    console.log('取消选中日期：', div.dataset.date);
                } else {
                    // 未选中，选中
                    div.dataset.selected = "true";
                    div.style.cssText = selectedStyle;
                    console.log('选中日期：', div.dataset.date);
                }
            });
        }
        calendar.appendChild(div);
    });
}
